<template>
    <div class="executeLog">
        <el-drawer title="执行日志" :visible.sync="executeLogDrawer" direction="rtl" size='736px'
            :before-close="handleClose">
            <div class="formSearch">
                <el-form :model="executeLogForm" label-width="110px" size="mini" ref="executeLogForm">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="自定义事件名称" prop="name">
                                <el-input v-model="executeLogForm.name" placeholder="请填写"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="执行结果" prop="state">
                                <el-select v-model="executeLogForm.state" filterable placeholder="请选择" clearable>
                                    <el-option v-for="item in zxjgOptions" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="执行时间" prop="time">
                                <el-date-picker v-model="executeLogForm.time" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期"
                                    >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="btn">
                    <el-button type="primary" size="mini" @click="search">查 询</el-button>
                </div>
            </div>
            <el-table :data="executeLogData" border style="width: 100%"
                :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
                :cell-style="{color:'#5a5a5a',fontSize:'12px'}" v-loading="loading" element-loading-text="加载中"
                element-loading-background="rgba(250, 250, 250, 0.5)" element-loading-spinner="el-icon-loading">
                <el-table-column prop="time" label="执行时间"  width="90">
                </el-table-column>
                <el-table-column prop="result" label="执行结果" width="80">
                </el-table-column>
                <el-table-column prop="name" label="自定义事件名称" width="105">
                </el-table-column>
                <el-table-column prop="eventType" label="执行事件类型" width="105">
                </el-table-column>
                <el-table-column label="事件内容">
                    <template slot-scope="scope">
                        {{comEvent(scope.row.customType,scope.row.pushObject)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="60">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="detailClick(scope.row.id)">
                            详情
                        </el-button>
                    </template>
                </el-table-column>
                <div slot="empty">
                    <el-empty :image-size="100"></el-empty>
                </div>
            </el-table>
            <el-pagination v-if="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[10,20,50,100]" :page-size="executeLogForm.limit" layout="total,prev, pager, next,sizes"
                :total="total" background>
            </el-pagination>
        </el-drawer>
        <el-drawer title="执行日志详情" :visible.sync="detailDrawer" direction="rtl" size='590px'>
            <el-form :model="detailLogForm" label-width="180px" size="mini" ref="detailLogForm">
                <el-form-item label="执行时间 :">
                    {{detailLogForm.time}}
                </el-form-item>
                <el-form-item label="执行结果 :">
                    {{detailLogForm.result}}
                </el-form-item>
                <el-form-item label="自定义事件名称 :">
                    {{detailLogForm.name}}
                </el-form-item>
                <el-form-item label="触发表单 :">
                    {{detailLogForm.type}}
                </el-form-item>
                <el-form-item label="状态 :">
                    {{detailLogForm.state}}
                </el-form-item>
                <el-form-item label="触发事件类型 :">
                    {{detailLogForm.customType}}
                </el-form-item>
                <el-form-item label="触发事件动作 :">
                    {{detailLogForm.customDataType}}
                </el-form-item>
                <el-form-item label="执行事件类型 :">
                    {{detailLogForm.eventType}}
                </el-form-item>
                <el-form-item label="执行对象 :">
                    {{detailLogForm.pushObject}}
                </el-form-item>
                <el-form-item label="提醒对象 :">
                    {{detailLogForm.user}}
                </el-form-item>
                <el-form-item label="提醒对象角色 :">
                    <template slot-scope="scope">
                        <span v-for="(item,index) in detailLogForm.userRole" :key="index">{{enumRole[item]}}
                            <span v-show="index != detailLogForm.userRole.length - 1">,</span>
                        </span>
                    </template>
                </el-form-item>
                <el-form-item label="推送内容 :">
                    <json-viewer :value="detailLogForm.pushMess" :expand-depth="5" copyable boxed sort></json-viewer>
                </el-form-item>
                </el-row>
            </el-form>
        </el-drawer>
    </div>
</template>

<script>
    import {
        log,
        logDetail
    } from '@/api/customEvent'
    export default {
        data() {
            return {
                executeLogDrawer: false,
                detailDrawer: false,
                loading:false,
                executeLogForm: {
                    name: '',
                    state: '',
                    time: [],
                    startTime:'',
                    endTime:'',
                    type:0,
                    page: 1,
                    limit: 10
                },
                detailLogForm: {
                    time:'',
                    result:'',
                    name:'',
                    type:'',
                    state:'',
                    customType:'',
                    customDataType:'',
                    eventType:'',
                    pushObject:'',
                    user:'',
                    userRole:'',
                    pushMess:'',
                },
                zxjgOptions: [{
                    value: 0,
                    label: '成功'
                }, {
                    value: 1,
                    label: '失败'
                }],
                executeLogData: [],
                total: 0,
                enumRole:{
                    0:'用户账号管理员',
                    1:'轻量-管理员',
                    2:'轻量-生产人员'
                }
            }
        },
        computed:{
            comEvent(){
                return (customType,pushObject) =>{
                    return `${customType}后，当满足触发事件条件时，执行${pushObject}`
                }
            }
        },
        methods: {
            //执行日志
            getLog(data) {
                this.loading = true
                log(data).then(res => {
                    if (res.code == 200) {
                        this.executeLogData = res.data.records
                        this.total = res.data.total
                    }
                    this.loading = false
                })
            },
            //执行日志详情
            getLogDetail(data) {
                logDetail(data).then(res => {
                    if (res.code == 200) {
                        for(let key in res.data){
                            this.detailLogForm[key] = res.data[key]
                        }
                        this.detailLogForm.pushMess = JSON.parse(res.data.pushMess).data
                        this.detailLogForm.userRole = res.data.userRole.split(',')
                    }
                })
            },
            //关闭执行日志
            handleClose(done) {
                this.$refs.executeLogForm.resetFields();
                done()
            },
            // 打开执行日志
            openDrawer() {
                this.getLog(this.executeLogForm)
                this.executeLogDrawer = true
            },
            //查询
            search(){
                this.executeLogForm.startTime = this.executeLogForm.time.length ? this.executeLogForm.time[0].dateFormat("yyyy-MM-dd 00:00:00") : ''
                this.executeLogForm.endTime = this.executeLogForm.time.length ? this.executeLogForm.time[1].dateFormat("yyyy-MM-dd 00:00:00") : ''
                this.getLog(this.executeLogForm)
            },
            //详情
            detailClick(id) {
                this.getLogDetail({id})
                this.detailDrawer = true
            },
            //pageSize 改变时会触发
            handleSizeChange(val) {
                this.executeLogForm.limit = val
                this.getLog(this.executeLogForm)
            },
            //currentPage 改变时会触发
            handleCurrentChange(val) {
                this.executeLogForm.page = val
                this.getLog(this.executeLogForm)
            },
        }
    }
</script>

<style lang="less" scoped>
    .executeLog {
        .formSearch {
            display: flex;

            /deep/ .el-form {
                flex: 22;
            }

            .btn {
                flex: 2;
                margin-left: 10px;
            }
        }

        /deep/ .el-drawer__header{
            color: rgba(0, 0, 0, .85);
        }
    }
</style>